<template>
	<div
		class="bg-bg-1 flex flex-col md:pl-[30px] pd-4 pr-[20px] md:py-[19px] py-[26px] rounded-lg container justify-center">
		<div class="flex justify-between w-full">
			<div class="flex items-center">
				<div class="mr-5 text-t-1 text-[16px] leading-[20px] overflow-ellipsis overflow-hidden">
					{{ data?.gameName }}
				</div>
				<base-router
					name="casinoProviderDetail"
					:params="{ id: data?.developerSlug }"
					class="mr-5 text-t-2 overflow-ellipsis overflow-hidden">
					{{ data?.developerName }}
				</base-router>
				<div class="md:flex hidden">
					<base-router
						name="casinoTags"
						:params="{ id: item.tagSlug }"
						class="bg-bg-10 rounded-lg px-[6px] h-[20px] text-[12px] content-center mr-5 app-bg-react text-t-2"
						v-for="(item, index) in props.data?.gameTagInfo"
						:key="index">
						{{ item.labelName }}
					</base-router>
				</div>
			</div>
			<div class="flex items-center">
				<div
					v-if="props.winnerData.username"
					class="md:flex items-center hidden bg-bg-10 rounded-[20px] app-bg-react px-3 py-[9px] mr-[7px] text-t-2">
					<div class="flex items-center mr-1">
						<base-icon name="champion" class="text-[#FEBC04] mr-1"></base-icon>
						<div class="leading-[20px]">{{ maxPayout }}</div>
					</div>
					<div class="flex">
						<div class="w-[20px] h-[20px] rounded-lg bg-primary mr-1">
							<base-image :src="winnerProfile" type="server" class="w-full"></base-image>
						</div>
						<div>{{ props.winnerData.username }}</div>
					</div>
				</div>
				<base-icon
					size="20"
					name="down"
					class="duration-300 rotate-180 text-t-3"
					@click="show = !show"
					:class="{
						'rotate-0-important': show
					}" />
			</div>
		</div>
		<transition @enter="onEnter" @leave="onLeave">
			<div class="flex md:flex-row flex-col mt-[20px]" v-if="show">
				<div class="flex items-start">
					<base-image
						:src="getGameIamge"
						type="network"
						class="w-[115px] h-[150px] rounded-lg mr-[20px] mb-[10px] md:mb-[0]"></base-image>
					<div class="md:hidden flex flex-col items-baseline" v-if="props.winnerData.username">
						<div
							class="bg-bg-10 rounded-[20px] app-bg-react px-3 py-[9px] mb-2 flex items-center text-t-2">
							<base-icon name="champion" class="text-[#FEBC04] mr-1"></base-icon>
							<div class="leading-[20px]">{{ maxPayout }}</div>
						</div>
						<div class="bg-bg-10 rounded-[20px] app-bg-react px-3 py-[9px]">
							<div class="flex">
								<div class="w-[20px] h-[20px] rounded-full bg-primary mr-1">
									<base-image :src="winnerProfile" type="server" class="w-full"></base-image>
								</div>
								<div>{{ props.winnerData.username }}</div>
							</div>
						</div>
					</div>
				</div>

				<div
					class="md:hidden flex mb-[10px] md:mb-[0] flex-wrap gap-2"
					v-if="props.data.gameTagInfo.length > 0">
					<base-router
						name="casinoTags"
						:params="{ id: item.tagSlug }"
						class="bg-bg-10 rounded-lg px-[6px] h-[20px] text-t-2 content-center app-bg-react"
						v-for="(item, index) in props.data.gameTagInfo"
						:key="index">
						{{ item.labelName }}
					</base-router>
				</div>
				<div class="flex flex-col items-start">
					<div
						class="rounded-lg bg-bg-10 px-2 mb-[10px] text-[var(--color-success)] h-[20px] items-center flex">
						{{ $t('casinoPre.edge') }}: {{ data.edge ?? '0.00' }}%
					</div>
					<p class="text-t-2 font-[700]">
						{{ data.category === 3 ? $t('casino.gameDesc.2up') : $t('casino.gameDesc.thirdParty') }}
					</p>
				</div>
			</div>
		</transition>
	</div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { BaseIcon, BaseImage, BaseRouter } from '@/components/base'
import gsap from 'gsap'
const show = ref(false)
const props = defineProps({
	data: {
		type: Object as any,
		default: () => {}
	},
	winnerData: {
		type: Object as any,
		default: () => {}
	}
})
const onEnter = (el: any, done: any) => {
	gsap.from(el, {
		height: 0,
		opacity: 0,
		duration: 0.3,
		ease: 'power1.in',
		onComplete: done
	})
}

const onLeave = (el: any, done: any) => {
	gsap.to(el, {
		height: 0,
		opacity: 0,
		duration: 0.3,
		ease: 'power1.out',
		onComplete: done
	})
}
const getGameIamge = computed(() => {
	let img = props.data?.gameEntranceIcon.en_Us
	if (!img) {
		img = props.data?.gameIcon
	}
	return img
})

const maxPayout = computed(() => {
	return props.winnerData.maxPayout + 'x'
})
const winnerProfile = computed(() => {
	return props.winnerData.userAvatar?.face
})
</script>
